<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ page import="java.net.InetAddress" %>
<html>
<head>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/tables.css" />"/>
<link rel="stylesheet" type="text/css" href="<c:url value="/css/button.css" />" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
	
	var myReloadPage; // control variable.
			
	function reload()
	{
		console.log(' ... reload');
		
		// get information from service about list of fights
		 $.getJSON("http://<%=InetAddress.getLocalHost().getHostAddress() %>:8080/fight-robot/fight-service/fights")
		 .done(function(data) {
		 
				// re-create the table information
				$("#fightTable > tbody").empty(); // remove all content
		 	
				/*
				var dataKeys = $.map(data, function(value, key) {
				  return key;
				});
				
				console.log(dataKeys);
				*/
				var dataValues = $.map(data, function(value, key) {
				  return value;
				});
				
				// add new data
				$.each( dataValues, function( i, item ) {
				
					if (item.activeRobot.currentStatus == 'DEAD') activeTD = "<td id='dead'>";
					else activeTD = "<td>";
					if (item.passiveRobot.currentStatus == 'DEAD') passiveTD = "<td id='dead'>";
					else passiveTD = "<td>";
					// console.log(item.activeRobot.name);
					var newRow = "<tr>";
					newRow = newRow + "<td>" + item.activeRobot.name + "</td>";
					newRow = newRow + activeTD + item.activeRobot.currentStatus +"</td>";
					newRow = newRow + "<td>" + item.passiveRobot.name + "</td>";
					newRow = newRow + passiveTD + item.passiveRobot.currentStatus + "</td>";
					newRow = newRow + "</tr>";
	
					$("#fightTable").append(newRow);
				});
				
				
		 })
		 .fail(function(){
		 			alert(" Error getting fight information. \n\r" + data);
		 });
		
	}
	
	function stopReload()
	{
		console.log(' ... stop reload');
		clearInterval(myReloadPage);
	}
	
	$(document).ready(function() {
		
		$("#start").click(function(){
				 $.get( "http://<%=InetAddress.getLocalHost().getHostAddress() %>:8080/fight-robot/fight-service/start")
					.done(function(data) {
						console.log("... executed : " + data );
						myReloadPage = setInterval("reload()",1000);
					})
					.fail(function() { 
						console.log( "error" ); 
					}); // end functions [ done().fail(). ]
		}); // end start function
		
		$("#stop").click(stopReload);
		
	});

</script>
</head>
<body>
	<h1>List of fights</h1>
	
	<br/>
	<button id="start">Start Fights</button>
	<br/>
	<button id="stop">Stop reload</button>
	<br/>
	Number of Fights : [${fn:length(hashFight)}]	
	<table id="fightTable">
	<thead>
		<tr>
			<th>Active Robot in Fight</th>
			<th>Status</th>
			<th>Passive Robot in Fight</th>
			<th>Status</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
	</table>

	
</body>
</html>